<!--编辑组件-->
<div id="MenuEdit" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="panel  panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title pull-left" > 修改实体 </h3>
                    <button type="button" v-on:click="jumpToList()" class="btn btn-primary pull-right" style="margin-top: -7px">返回</button>
                    <br/>
                </div>
                <div class="panel-body">
                    <!--表单部分-->
                    <div class="col-md-12 column">
                        <form class="form-horizontal" role="form" name="submitForm"  ref="submitForm"  v-bind:action="submitUrl">
                            <!--编辑条件-->
                            <template v-for="(item, index) in initSaveColumnList" >
                                <div class="form-group"  >
                                    <label v-bind:for="'inputFile'+index" class="col-md-offset-2 col-md-2 control-label">{{item.title}}:</label>
                                    <div class="col-md-4">
                                        <!--普通-->
                                        <template v-if="item.type == 0" >
                                            <input type="text"  v-model="saveDao[item.fieldName]" class="form-control" v-bind:id="item.fieldName" :disabled="!item.canEdit"/>
                                        </template>
                                        <!--图片-->
                                        <img v-if="item.type == 1" :src="saveDao[item.fieldName] !=null ? $ImageUrl(saveDao[item.fieldName]) : '/img/pass.png'"   class="img-thumbnail"  @click="selectImage(item.fieldName)" width="100" />
                                        <!--字典 翻译-->
                                        <template v-if="item.type == 2 && !item.canEdit" >
                                            <input type="input" v-model="dict[item.dictCodeType].map[saveDao[item.fieldName]]" class="form-control" v-bind:id="'inputFile'+index" :disabled="!item.canEdit"/></span>
                                        </template>
                                        <template v-if="item.type == 2 && item.canEdit" >
                                            <!-- 渲染字典列表 -->
                                            <select   v-model="saveDao[item.fieldName]"  class="form-control" v-bind:id="'inputFile'+index"  >
                                                <template v-for="dictItem in dict[item.dictCodeType].list" >
                                                    <option v-if="dictItem.codeCode == saveDao[item.fieldName]"  v-bind:value="dictItem.codeCode" selected>{{dictItem.codeValue }}</option>
                                                    <option v-else v-bind:value="dictItem.codeCode">{{dictItem.codeValue }}</option>
                                                </template>
                                            </select>
                                        </template>
                                        <!--日期-->
                                        <template v-if="item.type == 3" >
                                            <input type="input" :value="$formatDate('yyyy-MM-dd hh:mm:ss',saveDao[item.fieldName])" class="form-control" v-bind:id="'inputFile'+index" :disabled="!item.canEdit"/>
                                        </template>
                                        <!--自动带出-->
                                        <template v-if="item.type == 4" >
                                            <input type="input"  v-model="saveDao[item.fieldName + 'View']"  class="form-control" v-bind:id="item.fieldName" :disabled="!item.canEdit" autocomplete="off"/>
                                            <input type="hidden"  v-model="saveDao[item.fieldName]" class="form-control"  />
                                        </template>
                                    </div>
                                </div>
                            </template>
                            <div class="form-group">
                                <div class="col-md-offset-4 col-md-4">
                                    <button type="button" v-on:click="submit" class="btn btn-primary btn-lg btn-block "   v-if="isShow">提交保存</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>


    //采用vue
    var MenuEdit=new Vue({
        el: '#MenuEdit',
        data: {
            //提交的url
            submitUrl: '',
            //根据id查询对象的url
            queryUrl:'',
            //返回查询页面的url
            backUrl:'',
            //根据
            initSaveColumnUrl:Vue.prototype.getUrl('/pageInit/getInitEditPageDto/Menu'),
            saveDao:{},
            initSaveColumnList:[],
            dict:{},
            isEdit : false,
            isShow : true,
            nowSelImageField:'',
        },
        methods: {
            /**初始化*/
            init:function () {
                var that = this;
                this.$send(this.initSaveColumnUrl,null,function(data){
                    console.log('init执行成功！！'+JSON.stringify(data));
                    that.initSaveColumnList = data.initSaveColumnList;
                    that.submitUrl = data.saveUrl;
                    that.queryUrl = data.queryUrl;
                    that.backUrl = data.backUrl;
                    that.dict = data.dict;
                    //加载id对应的数据
                    that.loadEditData();

                });
            },
            jumpToList:function() {
                //加载页面
                loadPageToBodyMain(this.backUrl);
            },
            /**选择图片控件*/
            selectImage:function (fieldName){
                console.log('图片选择');
                //打开图片选择模态框
                this.$openImageComponent();
                //标记当前选择的图片控件
                this.nowSelImageField = fieldName;
            },
            selectedImageCallBack: function(imgId) {
                console.log('图片选择回调函数:'+imgId);
                //回写图片选择
                this.saveDao[this.nowSelImageField] = imgId;
            },
            /**根据id获取对应实体*/
            loadEditData:function(){
                //判断是否是修改
                if(sessionStorage.editId != null && sessionStorage.editId != 'null'){
                    console.log('editId=>'+sessionStorage.editId);
                    var that = this;
                    this.$send(this.queryUrl+sessionStorage.editId,null,function(data){
                        console.log('loadEditData成功！！'+JSON.stringify(data));
                        that.saveDao = data;
                        //翻译
                        that.$getPermById(data.permissionId,function (permissionDao) {
                            that.$set(that.saveDao,'permissionIdView' , permissionDao.name);
                        });
                        that.$getMenuDaoById(data.parentId,function (menuDao) {
                            that.$set(that.saveDao,'parentIdView',menuDao.name);
                        });
                    });
                    sessionStorage.editId = null;
                }
            },
            /** 提交 */
            submit: function() {
                if(!this.submitCheck()){ //数据校验
                    return false;
                }
                //走提交流程
                var that = this;
                this.$send(this.submitUrl,this.saveDao,function(data){
                    console.log('执行成功！！'+JSON.stringify(data));
                    that.isShow = false;
                    alert("保存成功");
                });
            },
            /** 提交表单前的验证*/
            submitCheck:function(){
                for(var i=0;i<this.initSaveColumnList.length;i++){
                    if(this.initSaveColumnList[i].required){
                        var testValue = this.saveDao[this.initSaveColumnList[i].fieldName];
                        if(testValue == null || testValue == '' || testValue == undefined){
                            alert('非空校验失败:['+this.initSaveColumnList[i].title+'],请完善!!');
                            return false;
                        }
                    }
                }
                return true;
            },

        },
        /**入参方法*/
        created: function () {
            this.init();
            var that_ = this;
            //重写图片选择回调方法
            Vue.prototype.selectedImg = function(imgId){
                that_.selectedImageCallBack(imgId);
            };

        },
        mounted: function() {
            //延迟一秒注册组件
            register();
        },
    });

    function register(){
        setTimeout(function(){
            //注册权限下拉
            Vue.prototype.$registerPermAuto('#permissionId',function(realValue) {
                console.log('设置1' + realValue);
                //MenuEdit.saveDao.permissionIdView = item.name;
                MenuEdit.saveDao.permissionId = realValue;
            });
            //注册菜单下拉
            Vue.prototype.$registerMenuAuto('#parentId',function(realValue) {
                console.log('设置2' + realValue);
                MenuEdit.saveDao.parentId = realValue;
            });
        },1000);
    }

</script>
